<template>
	<!-- 顶部 -->
	<view class="attribute">
		<view class="edit">
			<text>请给商品设置合适的属性</text>
			<text @click="toggle">编辑</text>
		</view>
		<!-- 商品属性 -->
		<view class="checkbox">
			<checkbox-group style="display: flex;flex-wrap: wrap;" @change="cheChecked">
				<label v-for="(item,index) in attribute.selected" :key="index" @click="checkStatus(item.propertyName,item.ischecked)">
					<checkbox :checked="item.ischecked" :value="item.propertyName" color="#e96c56"/>{{item.propertyName}}
				</label>
			</checkbox-group>
		</view>
	</view>
	<!-- 规格生成 -->
	<view class="attribute gener" v-for="(item,index) in skuData.sku" :key="item.title">
		<view class="edit specs-delete">
			<text>规格{{item.title}}</text>
			<text v-show="skuData.sku.length>1" @click="deleteSpecs(index)">删除</text>
		</view>
		<!-- 商品属性 -->
		<view class="edit entry" v-if="attribute.selected.length>0" v-for="(commodityProperty,index) in item.CPData" :key="index">
			<text>{{commodityProperty.attributeName}}</text>
			<input type="text" :placeholder="`请输入${commodityProperty.attributeName}的规格`" 
			  placeholder-class="I-style" cursor-spacing="50" v-model="commodityProperty.attributeValue">
		</view>
		<view class="edit entry">
			<text>价格</text>
			<input type="number" v-model.number="item.price" placeholder="请输入价格" placeholder-class="I-style" cursor-spacing="50">
			<text>元</text>
		</view>
		<view class="edit entry">
			<text>库存</text>
			<input type="number" placeholder="请输入库存" v-model.number="item.stock" placeholder-class="I-style" cursor-spacing="50">
			<text>件</text>
		</view>
		<!-- 上传图片 -->
		<view class="specs-image">
			<!-- 上传图片的+号 -->
			<image v-if="item.image==''" @click="upLoadImage(index)" src="/static/detail/shuxing-img.png" mode="aspectFill"></image>
			<!-- 用户上传的图片 -->
			<image v-else :src="item.image" mode="aspectFill" @click="ImagePreview(item.image)"></image>
			<!-- 删除图片 -->
			<image v-if="item.image!=''" @click="deleteImage(index)" src="/static/detail/shanchu.svg" class="delete-img" mode="widthFix"></image>
		</view>
	</view>
	<!-- 添加规格 -->
	<view class="attribute gener new-specs" @click="newSpecs">
		<image src="/static/detail/jiahao.svg" mode="widthFix"></image>
		<text>规格</text>
	</view>
	<!-- 修改属性-弹窗 -->
	<uni-popup ref="inputDialog" background-color="#fff" @change="change" :is-mask-click="false">
		<view class="popup-content">
			<view class="space-view">
				<view class="modify-sub">
					<text>修改/添加属性</text>
					<image src="/static/detail/guanbi.svg" mode="widthFix" @click="gb"></image>
				</view>
				<view class="att-input" v-for="item in stoAtt.attobj" :key="item.title">
					<text>属性{{item.title}}</text>
					<input type="text" placeholder="输入属性名称" v-model="item.propertyName" placeholder-class="I-style" cursor-spacing="50">
				</view>
				<view class="Submit">
					<text @click="add">新增</text>
					<text @click="submitProperty">提交</text>
				</view>
			</view>
		</view>
	</uni-popup>
	<!-- 底部按钮 -->
	<view style="height: 300rpx;"></view>
	<view class="newly-added-view">
		<view class="Submit">
			<text @click="cancel">取消</text>
			<text @click="preserve">保存</text>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,watch} from 'vue'
	import {sku_data} from "@/Acc-config/answer.js"
	
	import {onLoad} from '@dcloudio/uni-app'
	// 生命周期函数 监听页面加载，其参数为上个页面传递的数据
	onLoad((event)=>{//参数：可以接受到其他页面跳转过来传递的数据
		event=JSON.parse(event.sku)
		if(event.length>0){
			// 把数据改成存储弹窗需要的数据格式
			const new_arr= event[0].CPData.map((item,index)=>{
				return {
					propertyName:item.attributeName,
					title:index+1 //索引从0开始 
				}
			})
			stoAtt.attobj=new_arr
		
			// 调用弹窗提交方法
			submitProperty()
			// 赋值给商品规格
			skuData.sku=event
			
		}
	})
	
	// 控制修改属性-弹窗状态
	let inputDialog= ref(null)
	
	// 打开弹窗的方法
	function toggle() {
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		inputDialog.value.open('bottom')
	}
	
	// 弹窗的状态发生变化时触发-显示和隐藏
	function change(e) {
		// console.log('当前模式：' + e.type + ',状态：' + e.show);
	}
	
	// 关闭弹窗
	function gb(){
		/* setTimeout(()=>{
			inputDialog.value.close()
		},500) */
		// inputDialog.value.close()
		
		wx.nextTick(()=>{
			inputDialog.value.close()
		})
		
	}
	
	// 存储弹窗-创建/编辑的商品属性
	const stoAtt=reactive({
		attobj:[
			{
				propertyName:'',//商品属性名称
				title:1,//当前第几个属性
			},
			{
				propertyName:'',//商品属性名称
				title:2,//当前第几个属性
			},
			{
				propertyName:'',//商品属性名称
				title:3,//当前第几个属性
			}
		]
	})
	
	// 存储商品规格数据
	const skuData=reactive({
		sku:[
			{
				title:1,//规格数量
				CPData:[//商品属性
					{
						// attributeName:'',//商品属性名称
						// attributeValue:'',//收集用户输入的商品属性值
					}
				],
				price:'',//商品价格
				stock:'',//商品库存
				image:'',//商品图
				
			}
		]
	})
	
	// 存储商品属性(多选框的商品属性)
	const attribute=reactive({selected:[]})
	
	
	// 提交弹窗-修改或添加属性
	function submitProperty(){
		//过滤掉为空的属性值
		const filter=stoAtt.attobj.filter(item=>item.propertyName!='')
		
		const new_arr=[]
		filter.forEach(item=>{
			new_arr.push({
				propertyName:item.propertyName,//属性名
				ischecked:true,//是否勾选
			})
		})
		attribute.selected=new_arr
		// 关闭弹窗
		gb()
		
		// 生成规格
		calsku()
	}
	
	// 新增属性
	function add(){
		if(stoAtt.attobj.length<8){
			stoAtt.attobj.push({
				propertyName:'',//商品属性名称
				title:stoAtt.attobj.length+1,//当前第几个属性
			})
		}
	}

	//生成动态规格
	function calsku(){
		// 过滤掉没有勾选的属性
		const filterArr=attribute.selected.filter(item=>item.ischecked)
		
		// 遍历并返回商品规格需要的商品属性
		let newAtt=filterArr.map(item=>{
			return {
				attributeName:item.propertyName,
				attributeValue:''
			}
		})
		// 赋值给商品规格中的商品属性
		skuData.sku.forEach(item=>item.CPData=newAtt)
	}
	
	// 新增规格
	function newSpecs(){
		
		// 拿到最后一个商品规格的title
		let title=skuData.sku[skuData.sku.length-1].title
		title++
		
		let newSku={
				title:title,//规格数量
				CPData:[//商品属性
					{
						// attributeName:'',//商品属性名称
						// attributeValue:'',//收集用户输入的商品属性值
					}
				],
				price:'',//商品价格
				stock:'',//商品库存
				image:'',//商品图
				
			}
		skuData.sku.push(newSku)
		// 获取勾选的商品属性
		let filterArr=attribute.selected.filter(item=>item.ischecked)
		// 遍历并返回商品规格的商品属性需要的数据
		let newAtt=filterArr.map(item=>{
			return {
				attributeName:item.propertyName,
				attributeValue:''
			}
		})
		// 拿到最后一个商品规格的商品属性
		skuData.sku[skuData.sku.length-1].CPData=newAtt
	}
	
	// 删除规格
	function deleteSpecs(index){
		uni.showModal({
			title:'警告',
			content:'确定要删除吗?',
			success(res) {
				if(res.confirm){
					skuData.sku.splice(index,1)
					// 重新设置当前是第几个规格
					skuData.sku.forEach((item,i)=>{
						item.title=i+1
					})
					uni.$showMsg('删除成功','suces s')
				}
			}
		})
	}
	
	// 商品属性勾选状态发生变化时触发
	function cheChecked(e){
		let value= e.detail.value//拿到已经勾选的属性
		
		// 改变商品属性的勾选状态
		attribute.selected.forEach((iteming,index)=>{
			let item = attribute.selected[index]
			if(value.includes(iteming.propertyName)){
				item.ischecked=true
			}else item.ischecked=false
		})
	}
	
	// 商品属性勾选状态发生改变重新计算商品规格数组
	function checkStatus(attributeName,isChecked){
		if(isChecked){//已勾选
			skuData.sku.forEach(item=>{
				item.CPData.push({
					attributeName:attributeName,//商品属性名称
					attributeValue:'',//收集用户输入的商品属性值
				})
			})
		}else{//未勾选  从商品规格中移除该属性
			skuData.sku.forEach((item_a,index_a)=>{//双层数组，所以使用双重循环
				item_a.CPData.forEach((item_b,index_b)=>{
					if(item_b.attributeName==attributeName){
						skuData.sku[index_a].CPData.splice(index_b,1)
					}
				})
			})
		}
	}
	
	// 上传图片
	import {uploadImage,cloud,previewPicture} from '@/Acc-config/media.js'
	async function upLoadImage(index){
		try{
			// 上传图片
			let local= await uploadImage()
			uni.showLoading({
				title:'正在上传',
				mask:true
			})
			// 上传图片到云存储
			let resultUrl= await cloud(local[0].tempFilePath)
			skuData.sku[index].image=resultUrl
			uni.hideLoading()
		}catch(e){
			uni.$showMsg('上传失败','error')
		}
	}
	
	// 删除图片
	function deleteImage(index){
		skuData.sku[index].image=''
	}  
	
	// 图片预览
	function ImagePreview(image){
		previewPicture(image,[image])
	}
	
	// 取消
	function cancel(){
		uni.showModal({
			title:'确定要取消吗？',
			content:"取消会将填写的数据清空",
			success(res) {
				if (res.confirm) {
					uni.navigateBack({delta:1})
				} else if (res.cancel) {
					// console.log('用户点击取消');
				}
			}
		})
	}
	
	// 保存
	function preserve(){
		// 没有商品属性
		if(attribute.selected.length==0){
			uni.$showMsg('请添加商品属性')
			return false
		}else{//已有商品属性，但是没有勾选
			const checked=attribute.selected.filter(item=>item.ischecked)
			if(checked.length==0){
				uni.$showMsg('请至少勾选一个商品属性','none')
				return false
			}else{//规格没有填写完整
				let array = []
				skuData.sku.forEach(item=>{
					const filter = item.CPData.filter(iteming=>iteming.attributeValue == '')
					array.push(...filter)
				})
				if(array.length > 0){
					uni.$showMsg('请填写完所有的商品规格属性','none',2500)
					return false
				}
				const price=skuData.sku.filter(item=>item.price=='')
				if(price.length>0){
					uni.$showMsg('请把价格填写完整','none',1500)
					return false
				}
				const stock = skuData.sku.filter(item=>item.stock == '')
				if(stock.length > 0){
					uni.$showMsg('请把库存填写完整','none',1500)
					return false
				}
				const image = skuData.sku.filter(item=>item.image == '')
				if(image.length > 0){
					uni.$showMsg('请上传图片','none',1500)
					return false
				}
				
			}
			
		}
		
		// 将商品规格保存到公共的响应式传值中，Vue3中组件通信的方式
		sku_data.value=skuData.sku
		
		// 返回到上传商品页面
		uni.navigateBack({delta: 1})
	}

</script>

<style>
.uni-popup{
	z-index: 99999 !important;
}
.uni-popup .space-view{
	height: 800rpx;
}
page{
	background-color: #ededed;
}
.attribute{
	background-color: #fff;
	margin: 20rpx;
	padding: 20rpx 20rpx 0 20rpx;
	border-radius: 8rpx;
}
.edit{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.edit text:nth-child(1){
	color: #a8a8a8;
}
.edit text:nth-child(2){
	color: #616990;
}
.checkbox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 20rpx;
}
.checkbox label{
	padding: 0 40rpx 20rpx 0;
}
/* 规格生成*/
.gener{
	background-color: #FFFFFF !important;
}
.specs-delete text:nth-child(1){
	color: #333333 !important;
	font-weight: bold;
}
.specs-delete{
	padding-bottom: 20rpx;
}
.entry{
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f1f1f1;
}
.entry text{
	color: #333333 !important;
}
.entry text:nth-child(1){
	flex: 1;
}
.entry input{
	padding: 0 20rpx;
	text-align: right;
}
.I-style{
	color: #a8a8a8;
}
.specs-image{
	display: flex;
	justify-content: space-between;
}
.specs-image image{
	display: block;
	width: 150rpx;
	height: 150rpx;
	border-radius: 8rpx;
	padding: 20rpx 0;
}
.delete-img{
	width: 40rpx !important;
	height: 40rpx !important;
}
/* 新增规格 */
.new-specs image{
	width: 50rpx;
	height: 50rpx;
	margin-right: 20rpx;
}
.new-specs{
	display: flex;
	align-items: center;
	color: #5f698c;
	padding: 30rpx !important;
}
/* 修改属性 */
.att-input{
	display: flex;
	align-items: center;
	padding: 40rpx 0;
	border-bottom: 1rpx solid #e7e7e7;
}
.att-input text{
	flex: 1;
}
.att-input input{
	text-align: right;
}
/* 底部提交 */
.Submit{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 30rpx 20rpx 68rpx 20rpx;
}
.Submit text{
	padding: 15rpx 60rpx;
	border-radius: 10rpx;
}
.Submit text:nth-child(1){
	background-color: #f7f7f7;
	color: #ce6b4e;
	margin-right: 30rpx;
}
.Submit text:nth-child(2){
	background-color: #ed6b51;
	color: #FFFFFF;
}
</style>